import * as React from "react";
import { Uploader, UploadField } from "@navjobs/upload";
import "./index.scss";

class Upload extends React.Component {
  static defaultProps = {
    onChange: () => {}
  };
  static getDerivedStateFromProps(nextProps, prevState) {
    const { value } = nextProps;
    if (value) {
      return {
        fileList: value
      };
    }
    return null;
  }
  state = {
    fileList: this.props.value || []
  };
  handleDel = index => {
    const { fileList } = this.state;
    const { onChange } = this.props;
    fileList.splice(index, 1);
    this.setState({
      fileList
    });
    onChange(fileList);
  };
  render() {
    const { node } = this.props;
    const labelText = node.data.get("label");
    const { onChange } = this.props;
    const { fileList } = this.state;
    return (
      <Uploader
        request={{
          url: "http://localhost:3000/",
          method: "POST",
          fields: {
            // extra fields to pass with the request
            full_name: "Testing extra fields"
          },
          headers: {
            // custom headers to send along
            Authorization: "Bearer: Test"
          },
          // use credentials for cross-site requests
          withCredentials: false
        }}
        onComplete={({ response, status }) => {
          if (status === 200) {
            onChange([...fileList, response]);
          } else {
            onChange([...fileList, { ...response, fail: true }]);
          }
        }}
        // upload on file selection, otherwise use `startUpload`
        uploadOnSelection={true}
      >
        {({ onFiles, progress, complete }) => (
          <div style={{ ...this.props.style }}>
            <UploadField onFiles={onFiles}>
              <div style={{ minHeight: "1.52rem" }} className="formitem">
                <label>{labelText || "附件"}</label>
                <div className="novalue">
                  <div style={{ display: "flex" }}>
                    <span>添加附件</span>
                    <img
                      alt=""
                      src={process.env.PUBLIC_URL + "/assets/img/add.png"}
                      className="add"
                    />
                  </div>
                </div>
              </div>
            </UploadField>
            {fileList.map((file, index) => (
              <div className="filelist" key={index}>
                <div>
                  <img
                    alt=""
                    src={process.env.PUBLIC_URL + "../assets/img/enclosure.png"}
                  />
                  <span>{file.filename}</span>
                </div>
                <img
                  onClick={() => this.handleDel(index)}
                  src={process.env.PUBLIC_URL + "../assets/img/enclosure.png"}
                  className="del"
                  alt=""
                />
              </div>
            ))}
            {/* {progress ? `Progress: ${progress}` : null}
          {complete ? "Complete!" : null} */}
          </div>
        )}
      </Uploader>
    );
  }
}
export default props => {
  return <Upload {...props} />;
};
